<template>
  <div class="flex flex-col h-full">
    <SearchContainer show-export @search="onSearch" @reset="() => formRef.resetFields()" @export="exportRef.$el.querySelector('button').click()">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="dateRange" label="日期">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="flex-1">
      <div class="flex w-full">
        <div class="w-1/4 pr-2">
          <a-input v-model:value="formState.pyjm" placeholder="请输入医生拼音捡码" class="mb-2 w-[300px]" @keyup.enter="getData" />
          <BaseTable
            fill
            :loading="loading"
            :custom-row="onClickRow"
            :row-class-name="(record) => (record.empId === selectedKey ? 'selected-row cursor-pointer' : 'cursor-pointer')"
            column-code="001215"
            :data-source="tableData"
            bordered
            :extra-height="60"
          >
            <template #bodyCell="{ column, index }">
              <template v-if="column.dataIndex === 'xh'">
                {{ index + 1 }}
              </template>
            </template>
            <template #summary>
              <a-table-summary fixed>
                <a-table-summary-row>
                  <a-table-summary-cell>合计</a-table-summary-cell>
                  <a-table-summary-cell>
                    <a-typography-text>-</a-typography-text>
                  </a-table-summary-cell>
                  <a-table-summary-cell>
                    <a-typography-text>-</a-typography-text>
                  </a-table-summary-cell>
                  <a-table-summary-cell>
                    <a-typography-text>
                      <div class="text-right">{{ formatAmount(totalPrice) }}</div>
                    </a-typography-text>
                  </a-table-summary-cell>
                </a-table-summary-row>
              </a-table-summary>
            </template>
          </BaseTable>
        </div>
        <div class="w-3/4 pl-2">
          <a-input v-model:value="formState.xmpyjm" placeholder="请输入药材拼音捡码" class="mb-2 w-[300px]" @keyup.enter="getDataTwo" />
          <BaseTable fill :loading="loadingTwo" column-code="001216" :data-source="tableDataTwo" bordered :extra-height="60">
            <template #bodyCell="{ column, index }">
              <template v-if="column.dataIndex === 'xh'">
                {{ index + 1 }}
              </template>
            </template>
            <template #summary>
              <a-table-summary fixed>
                <a-table-summary-row>
                  <a-table-summary-cell>合计</a-table-summary-cell>
                  <a-table-summary-cell>
                    <a-typography-text>-</a-typography-text>
                  </a-table-summary-cell>
                  <a-table-summary-cell>
                    <a-typography-text>-</a-typography-text>
                  </a-table-summary-cell>
                  <a-table-summary-cell>
                    <a-typography-text>-</a-typography-text>
                  </a-table-summary-cell>
                  <a-table-summary-cell>
                    <a-typography-text>
                      <div>{{ totalNumber }}</div>
                    </a-typography-text>
                  </a-table-summary-cell>
                  <a-table-summary-cell>
                    <a-typography-text>-</a-typography-text>
                  </a-table-summary-cell>
                  <a-table-summary-cell>
                    <a-typography-text>-</a-typography-text>
                  </a-table-summary-cell>
                  <a-table-summary-cell>
                    <a-typography-text>
                      <div class="text-right">{{ formatAmount(totalPriceMedicinal) }}</div>
                    </a-typography-text>
                  </a-table-summary-cell>
                </a-table-summary-row>
              </a-table-summary>
            </template>
          </BaseTable>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import { formatAmount } from '@/utils/format.js'

const exportRef = ref(null)
const formRef = ref(null)
const selectedKey = ref('')
const totalPrice = ref(0)
const totalNumber = ref(0)
const totalPriceMedicinal = ref(0)
const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  yzlbList: [2]
})
const { loading, tableData, getData } = useTable({
  url: '/statistic/getDoctorMedicineUse',
  params: formState.value,
  pagination: false,
  immediate: true,
  formatResult: (result) => {
    totalPrice.value = result?.zje
    if (result.doctorResponseList.length > 0) {
      selectedKey.value = result.doctorResponseList[0].empId
      getDataTwo()
    }
    return result.doctorResponseList
  }
})

const {
  loading: loadingTwo,
  tableData: tableDataTwo,
  getData: getDataTwo
} = useTable({
  url: '/statistic/getDoctorMedicineUseDetail',
  pagination: false,
  formatParams: () => {
    return {
      ...formState.value,
      empId: selectedKey.value
    }
  },
  formatResult: (result) => {
    totalNumber.value = result?.zsl
    totalPriceMedicinal.value = result?.zje
    return result.detailResponseList
  }
})

const onClickRow = (row) => {
  return {
    onClick: () => {
      selectedKey.value = row?.empId
      getDataTwo()
    }
  }
}

const onSearch = () => {
  getData()
  getDataTwo()
}
</script>
